<template>
  <div id="app"
       v-bind:style="appDivStyle">
    <div class="context"
         ref="context">
      <div class="queryBox"
           ref="queryBox">
        <el-form :model="formQueryCondition"
                 ref="form"
                 size="mini">
          <el-row>
            <!-- 剧集编号 -->
            <el-col :span="5">
              <el-form-item :label="$t('TurnDown.queryLabel.product.subAssetCode')"
                            :label-width="queryformLabelWidth">
                <el-input v-model.trim="formQueryCondition.subassetCode.val"
                          class="queryItemStyle"
                          clearable
                          :placeholder="$t('TurnDown.queryLabel.product.placeholderSubAssetCode')">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 剧集名称 -->
            <el-col :span="5"
                    :offset="1">
              <el-form-item :label="$t('TurnDown.queryLabel.product.subAssetName')"
                            :label-width="queryformLabelWidth">
                <el-input v-model.trim="formQueryCondition.subassetName.val"
                          class="queryItemStyle"
                          clearable
                          :placeholder="$t('TurnDown.queryLabel.product.placeholderSubAssetName')">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div style="text-align:right">
                <!--返回-->
                <el-form-item v-if="isNeedGoBack">
                  <el-button type="primary"
                             @click="back"
                             icon="el-icon-back">{{ $t('TurnDown.btnText.backBtnText') }}</el-button>
                  <!-- 导出 -->
                  <!-- <el-form-item>
                      <el-button v-permission="{menuCode: menuCode, resourceCode: 'exportBtnText'}"
                      type="primary" @click="onExport" icon="el-icon-download" :loading="loading">{{ $t('btnText.auditRecordExportBtnText') }}</el-button>
                </el-form-item> -->
                  <!-- 导入 -->
                  <!-- <el-button v-permission="{menuCode: menuCode, resourceCode: 'ImportBtnText'}"
                              type="primary" @click="onImport" icon="el-icon-upload2" :loading="loading">{{ $t('TurnDown.btnText.importBtnText') }}</el-button> -->
                  <!-- 重置 -->
                  <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}"
                             type="primary"
                             @click="onReset('form')">{{ $t('TurnDown.btnText.resetBtnText') }}</el-button>
                  <!-- 查询 -->
                  <el-button v-permission="{menuCode: menuCode, resourceCode: 'querySubBtnText'}"
                             type="primary"
                             @click="onQuery('querySubBtnText')"
                             icon="el-icon-search"
                             :loading="loading">
                    {{$t('TurnDown.btnText.queryBtnText')}}</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--数据网格-->
      <div class="dataBox"
           ref="dataBox">
        <transition enter-active-class="animated zoomIn"
                    leave-active-class="animated rotateOut">
          <el-table v-if="isInit"
                    ref="singleTable"
                    :data="tableData"
                    :height="tableHeight"
                    @sort-change="sortChange"
                    v-loading="loading"
                    size="mini"
                    style="width: 100%;"
                    stripe=stripe
                    border=border>
            <el-table-column type="index"
                             width="50"
                             fixed="left"
                             :label="$t('table.xh')"
                             align="center">
            </el-table-column>
            <!--复选框-->
            <el-table-column :label="$t('table.op')"
                             fixed="left"
                             min-width="210">
              <template slot-scope="scope">
                <!-- <el-button size="gv"  icon="fa fa-edit" :loading="loading" @click="editMenu(scope.$index, scope.row)">
                                {{ $t('TurnDown.btnText.restoreBtnText') }}
                        </el-button>
                        <el-button size="gv" icon="el-icon-delete" type="danger" :loading="loading"
                                @click="deleteRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.deleteBtnText') }}</el-button> -->
                <!--详情-->
                <el-button size="gv"
                           icon="el-icon-tickets"
                           :loading="loading"
                           v-permission="{menuCode: menuCode, resourceCode: 'subDetailsBtnText'}"
                           @click="clickDetails(scope.$index, scope.row,'subDetailsBtnText')">{{ $t('shellAssets.btnText.detailsBtnText') }}</el-button>
                <!--预览-->
                <el-button size="gv"
                           icon="el-icon-caret-right"
                           :loading="loading"
                           v-permission="{menuCode: menuCode, resourceCode: 'previewBtnText'}"
                           @click="play">{{ $t('TurnDown.btnText.previewBtnText') }}</el-button>
                <!--审核-->
                <el-button size="gv"
                           icon="el-icon-edit"
                           v-permission="{menuCode: menuCode, resourceCode: 'auditingBtnText'}"
                           :loading="loading"
                           @click="onAudit(scope.$index, scope.row, 'auditingBtnText')">{{ $t('TurnDown.btnText.auditingBtnText') }}</el-button>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="productName" min-width="110" fixed="left"
                                        :label="$t('TurnDown.table.product.productName')" sortable="custom" sort-by="productName">
                    </el-table-column>
                    <el-table-column prop="productCode" min-width="110" fixed="left"
                                        :label="$t('TurnDown.table.product.productCode')" sortable="custom" sort-by="productCode">
                    </el-table-column>
                    <el-table-column prop="status" min-width="130"
                    :label="$t('TurnDown.table.product.status')" sortable="custom" sort-by="status">
                    </el-table-column>
                    <el-table-column prop="createTime" min-width="150"
                    :label="$t('TurnDown.table.product.createTime')" sortable="custom" sort-by="createTime">
                    </el-table-column>
                    <el-table-column prop="reason" min-width="150"
                    :label="$t('TurnDown.table.product.reason')" sortable="custom" sort-by="reason">
                    </el-table-column> -->

            <!--资产编号-->
            <!-- <el-table-column prop="assetCode" min-width="150" fixed="left"
                                        :label="$t('TurnDown.table.shellAssets.code')" sortable="custom" sort-by="code">
                    </el-table-column> -->
            <!--资产名称-->
            <!-- <el-table-column prop="assetName" min-width="180" fixed="left"
                                        :label="$t('TurnDown.table.shellAssets.name')" sortable="custom" sort-by="name">
                    </el-table-column> -->

            <!--剧集编号-->
            <el-table-column prop="subassetCode"
                             min-width="150"
                             fixed="left"
                             :label="$t('TurnDown.table.shellAssets.subAssetCode')"
                             sortable="custom"
                             sort-by="subassetCode">
            </el-table-column>
            <!--剧集名称-->
            <el-table-column prop="subassetName"
                             min-width="180"
                             fixed="left"
                             :label="$t('TurnDown.table.shellAssets.subAssetName')"
                             sortable="custom"
                             sort-by="subassetName">
            </el-table-column>
            <!-- 剧集数 -->
            <el-table-column prop="subassetNum"
                             min-width="110"
                             :label="$t('TurnDown.table.shellAssets.itemNum')"
                             sortable="custom"
                             sort-by="subassetNum">
            </el-table-column>
            <!--剧集状态-->
            <el-table-column prop="approvalStatus"
                             min-width="110"
                             :label="$t('TurnDown.table.assets.status')"
                             sortable="custom"
                             sort-by="approvalStatus">
            </el-table-column>
            <!--资产来源-->
            <el-table-column prop="speAreaName"
                             min-width="110"
                             :label="$t('TurnDown.table.shellAssets.source')">
            </el-table-column>
            <!--资产类型-->
            <el-table-column prop="assetType"
                             min-width="110"
                             sortable="custom"
                             sort-by="assetType"
                             :label="$t('TurnDown.table.shellAssets.type')">
            </el-table-column>
            <!--授权时间
                    <el-table-column prop="expireTime" min-width="120"
                                        :label="$t('shellAssets.table.shellAssets.expireTime')" sortable="custom" sort-by="expireTime">
                    </el-table-column>
                    -->
            <!--版权结束时间-->
            <el-table-column prop="copyrightEndDate"
                             min-width="180"
                             sortable="custom"
                             sort-by="copyrightEndDate"
                             :label="$t('TurnDown.table.shellAssets.expireEndTime')">
            </el-table-column>
            <!--创建时间-->
            <el-table-column prop="createdDate"
                             min-width="180"
                             :label="$t('TurnDown.table.shellAssets.createTime')"
                             sortable="custom"
                             sort-by="createdDate">
            </el-table-column>
            <!--最后修改时间-->
            <el-table-column :label="$t('TurnDown.table.lastUpdateTime')"
                             min-width="180"
                             sortable="custom"
                             prop="lastUpdatedDate"
                             sort-by="lastUpdatedDate">
            </el-table-column>
            <!--最后修改人-->
            <el-table-column :label="$t('TurnDown.table.lastUpdatedBy')"
                             min-width="180"
                             sortable="custom"
                             prop="modifier"
                             sort-by="modifier">
            </el-table-column>
            <!-- 原因 -->
            <!-- <el-table-column prop="reason" min-width="150"
                    :label="$t('TurnDown.table.product.reason')" sortable="custom" sort-by="reason">
                    </el-table-column> --> -->
          </el-table>
        </transition>
      </div>
    </div>
    <div class="pageBox">
      <el-pagination @size-change="sizeChange"
                     @current-change="currentPageChange"
                     :current-page="pager.curPage"
                     :page-sizes="pager.sizes"
                     :page-size="pager.curSize"
                     :background="true"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pager.total">
      </el-pagination>
    </div>

    <!--详情对话框-->
    <el-dialog :title="$t('label.dialogDetails')"
               :visible.sync="isShowDetails"
               top="5vh"
               width="60%"
               :close-on-click-modal="false">
      <el-tabs v-model="activeName"
               type="border-card">
        <el-tab-pane :label="$t('label.assetsInfo')"
                     name="first">
          <sub-assets-info :datas="dataForm"></sub-assets-info>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>

    <!--审核对话框-->
    <el-dialog :title="$t('assetsAudit.auditing')"
               :visible.sync="isShowReviewForm"
               top="5vh"
               width="60%"
               @close="closeDialog"
               :close-on-click-modal="false">
      <el-form :model="auditForm"
               ref="auditForm"
               size="mini"
               :label-position="editFormPosition"
               status-icon=status-icon
               :rules="auditRules">
        <el-form-item :label="$t('assetsAudit.rejects')"
                      :label-width="editformLabelWidth"
                      prop="rejects">
          <el-input v-model.trim="auditForm.rejects"
                    :disabled="true"
                    type="textarea"
                    :rows="2">></el-input>
        </el-form-item>
        <el-form-item :label="$t('assetsAudit.auditSuggestion')"
                      :label-width="editformLabelWidth"
                      prop="reviewDesc">
          <el-input v-model.trim="auditForm.reviewDesc"
                    type="textarea"
                    :rows="2"
                    :placeholder="$t('label.pleaseInput')">></el-input>
        </el-form-item>

        <el-form-item :label-width="editformLabelWidth">
          <el-button size="mini"
                     type="primary"
                     @click="submitFormForPass(currentResCode)"
                     :loading="loading">{{$t('assetsAudit.pass')}}</el-button>
          <el-button size="mini"
                     type="primary"
                     @click="submitFormForReject('auditForm',currentResCode)"
                     :loading="loading">{{$t('assetsAudit.reject')}}</el-button>
          <el-button size="mini"
                     @click="isShowReviewForm = false"
                     :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import comBaseVue from '../../baseViewModel';
import subAssetsInfo from '../audit/SubAssetsInfo';
import Vue from 'vue';

export default {
  mixins: [comBaseVue],
  name: 'TurnDown',
  props: {
    isNeedGoBack: Boolean,
    curRootAssets: null,
    menuCode: String,
  },
  data () {
    return {
      isShowDetails: false,
      isShowReviewForm: false,
      activeName: 'first',
      isInit: false,
      tableHeight: 100,
      appDivStyle: {
        height: this.$store.getters.appHeight,
      },
      modelName: "com.ispr.iptv.entity.media.SubAssetEntity",
      formQueryCondition: {
        assetCode: {
          key: 'assetId',
          op: '=',
          val: "",
        },
        subassetCode: {
          key: 'subassetCode',
          op: 'LIKE',
          val: ''
        },
        subassetName: {
          key: 'subassetName',
          op: 'LIKE', // 操作符
          val: '' // 查询的值
        },
        approvalStatus: {
          key: 'approvalStatus',
          op: '=',
          val: 'TheAuditFailed'
        },
        isEnable: {
          key: 'isEnable', // 操作符
          op: '=', // 操作符
          val: 'Available' // 查询的值
        },
      },
      // 编辑面板绑定的对象
      editForm: {
        keyID: 0,
        version: 0,
        // productName: "",
        // productCode: "",
        // tariffsType: "",
        // automaticRenew: "",
        // periodicUnit: "",
        // periodicNum: "",
        // productPrice: "",
        // productType: "",
        // effectiveTimeS: "",
        // effectiveTimeE: "",
        // applicablePlatform:[],
        // service: "",
        // icon:"",
        // backgroundPicture:"",
        // remarks: "",
        rejects: "",
        auditSuggestion: "",

      },
      // 编辑面板的验证规则
      editRules: {
        // name: [{ required: true, message: this.$i18n.t('shellAssets.label.placeholder')+this.$i18n.t('shellAssets.editLabel.shellAssets.name'), trigger: 'blur' }],
        auditSuggestion: [{ required: true, message: this.$i18n.t('assetsAudit.rules.auditSuggestion'), trigger: 'blur' }],
      },
      dataForm: {
        keyID: 0,
        version: 0,
        belongToAssets: "",
        subAssetName: "",
        itemNum: "",
        time: "",
        definition: "",
        resolution: "",
        codeRate: "",
        videoSize: "",
        originId: "",
        absoluteURL: "",
      },
      // 审核确认面板绑定的对象
      auditForm: {
        keyId: "",
        version: 1,//审核记录表新增记录的version
        subAssetVersion: "",//当前审核剧集的version
        reviewDataId: "",
        reviewDataType: "",
        isEnable: "",
        rejects: "",//上一次审核驳回的意见
        approvalStatus: "",
        reviewDesc: "",
      },
      auditRules: {
        reviewDesc: [{ required: true, message: this.$i18n.t('assetsAudit.rules.auditSuggestion'), trigger: 'blur' }],
      },
      // 排序对象
      sort: {
          key: "subassetNum",
          dir: "Desc"
      }
    }
  },
  methods: {
    onReset: function () {
      if (this.$refs['form']) {
        this.$refs['form'].resetFields();
      }
      this.formQueryCondition.subassetCode.val = "";
      this.formQueryCondition.subassetName.val = "";
    },
    // 新增
    onNew: function () {
      this.isShowEditForm = true;
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields();
      }
      this.editForm.keyID = "";
      this.editForm.version = "";
      this.editForm.productName = "";
      this.editForm.productCode = "";
      this.editForm.periodicUnit = "";
      this.editForm.periodicNum = "";
      this.editForm.tariffsType = "";
      this.editForm.automaticRenew = "";
      this.editForm.productPrice = "";
      this.editForm.productType = "";
      this.editForm.applicablePlatform = [];
      this.editForm.effectiveTimeS = "";
      this.editForm.effectiveTimeE = "";
      this.editForm.service = "";
      this.editForm.icon = "";
      this.editForm.backgroundPicture = "";
      this.editForm.remarks = "";
      this.curCommand = "SaveNew";
      this.canEditCode = false;
    },
    // 网格数据成功后的回调
    // setTableData: function(isSuccess,json) {
    //     this.loading = false;
    //     // console.log(json);
    //     try{
    //         if (isSuccess) {
    //             // console.info(JSON.stringify(json));
    //             this.pager.total = json.total;
    //             this.curRootAssets = [];
    //             for (var i = 0; i < json.list.length; i++) {
    //                 this.curRootAssets.push(json.list[i]);
    //             }

    //         }
    //         else {
    //             this.$message.error(this.$i18n.t("errorCode." + json.reason,json.message));
    //         }
    //     }
    //     catch(e){
    //         alert(e);
    //     }
    // },
    editMenu: function () {
      this.$message({
        message: this.$i18n.t("操作成功"),
        type: 'success'
      });
    },
    editMenuTwo: function () {
      this.$message({
        message: this.$i18n.t("操作成功"),
        type: 'success'
      });
    },
    //回退事件
    back: function (isSuccess, json) {
      this.$parent.setCurrentComponent("goBack", null);
    },
    // 播放
    play: function () {

    },
    // 导出
    onExport: function () {
      let param = {
        'className': 'com.ispr.iptv.entity.audit.ReviewHisEntity',
        'opKey': 'Export',
        'params': [
          { 'key': 'reviewDataType', 'val': "SUBASSET", 'op': '=', 'group': '' },
        ],

        'sort': [{ 'col': 'keyId', 'order': 'desc' }],
        'fileName': '资产审核确认'
      };
      let fileName = '资产审核确认(剧集)' + '.xlsx';
      this.downloadByIdOrName(this, '/file/export', 'param', JSON.stringify(param), fileName);
    },
    // 导入
    onImport: function () {

    },

    // 详情按钮单击事件
    clickDetails: function (index, row, rescode) {
      this.currentResCode = (rescode && rescode !== '') ? rescode : '';
      this.queryModelByKeyID("com.ispr.iptv.entity.media.SubAssetEntity", row.keyId, "Query", this.showDetails);

    },
    // 详情按钮回调事件
    showDetails: function (isSuccess, json) {
      if (isSuccess) {
        // this.curCommand = "UpdateProc";
        this.isShowDetails = true;
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm = json;


      }
      else {
        this.$message({
          message: json.msg,
          type: 'warning'
        });
      }
    },

    // 审核事件
    onAudit: function (index, row, rescode){
        this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      // this.queryModelByKeyID("com.ispr.iptv.entity.audit.ReviewHisEntity",row.keyId,"Query",this.reviewCallback);
      //查询上次审核记录
      this.queryModel("com.ispr.iptv.entity.audit.ReviewHisEntity", "Query", {
        reviewDataId: { key: 'reviewDataId', op: '=', val: row.keyId },
        version: { key: 'version', op: '=', val: "0" }
      }, this.pager, this.sort, this.reviewCallback);
      this.auditForm.rejects = "";
      this.auditForm.reviewDesc = "";
      this.auditForm.reviewDataId = row.keyId;
      this.auditForm.subAssetVersion = row.version;
      this.auditForm.reviewDataType = "SUBASSET";
      this.auditForm.isEnable = "Available";
      this.isShowReviewForm = true;
    },
    //查询上次审核记录回调函数
    reviewCallback: function (isSuccess, json) {
      if (isSuccess) {
        this.auditForm.rejects = json.list[0].reviewDesc;
      }
      else {
        this.$message({
          message: json.msg,
          type: 'warning'
        });
      }
    },
    // 通过
    submitFormForPass: function (rescode){
            this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      this.auditForm.approvalStatus = "ExaminationPassed",
        this.loading = true;
      this.procCommand("MediaAuditProc",
        "com.ispr.iptv.entity.media.SubAssetEntity",
        "Default",
        {
          "assetId": this.curRootAssets.assetId,
          "keyId": this.auditForm.reviewDataId,
          "version": this.auditForm.subAssetVersion,
          "approvalStatus": this.auditForm.approvalStatus,
          "reviewHisEntity": this.auditForm
        },
        null,
        this.commonCallback);
    },
    // 驳回
    submitFormForReject: function (formName, rescode){
            this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      var _this = this;
      //两次审核不通过状态改为废弃
      this.auditForm.approvalStatus = "Discard",
        this.$refs[formName].validate(function (valid) {
          if (valid) {
            _this.loading = true;
            _this.procCommand("MediaAuditProc",
              "com.ispr.iptv.entity.media.SubAssetEntity",
              "Default",
              {
                "assetId": _this.curRootAssets.assetId,
                "keyId": _this.auditForm.reviewDataId,
                "version": _this.auditForm.subAssetVersion,
                "approvalStatus": _this.auditForm.approvalStatus,
                "reviewHisEntity": _this.auditForm
              },
              null,
              _this.commonCallback);
          } else {
            return false;
          }
        });
    },

    commonCallback: function (isSuccess, json) {
      this.loading = false;
      this.isShowReviewForm = false;
      if (isSuccess) {
        this.$message({
          message: this.$i18n.t("message.successTip"),//resource.message.successTip,
          type: 'success'
        });
        this.queryTable();
      }
      else {
        this.$message({
          message: json.msg,
          type: 'warning'
        });
      }
    },
    closeDialog: function () {
      this.$refs['auditForm'].resetFields();
    },
    success: function () {
      this.isShowReviewForm = false;
      this.$message({
        message: this.$i18n.t("message.successTip"),
        type: 'success'
      });
      this.queryTable();
    },
    enterDown(){
      var g = this
      if(g.isShowReviewForm){
        g.submitFormForPass(g.currentResCode)
      }else if(g.isShowDetails){
        // 详情
        g.isShowDetails = false
      }else if(!g.loading){
        g.onQuery()
      }
    }

  },
  activated: function () {
    this.formQueryCondition.assetCode.val = this.curRootAssets.assetId;
    this.onReset();
    this.onQuery();
  },
  mounted: function mounted () {
    this.onQuery();
    this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
    this.isInit = true;
    //this.onQuery();
  },
  components: {
    "sub-assets-info": subAssetsInfo
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>


